
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>React and separation of concerns · React in patterns</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Krasimir Tsonev">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../styles/website.css">
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="../chapter-14/" />
    
    
    <link rel="prev" href="../chapter-12/" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../chapter-01/">
            
                <a href="../chapter-01/">
            
                    
                    In brief
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Foundation</li>
        
        
    
        <li class="chapter " data-level="2.1" data-path="../chapter-02/">
            
                <a href="../chapter-02/">
            
                    
                    Communication
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1.1" data-path="../chapter-02/">
            
                <a href="../chapter-02/#input">
            
                    
                    Input
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.2" data-path="../chapter-02/">
            
                <a href="../chapter-02/#output">
            
                    
                    Output
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="../chapter-03/">
            
                <a href="../chapter-03/">
            
                    
                    Event handlers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="../chapter-04/">
            
                <a href="../chapter-04/">
            
                    
                    Composition
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.3.1" data-path="../chapter-04/">
            
                <a href="../chapter-04/#using-reacts-children-api">
            
                    
                    Using React's children API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.2" data-path="../chapter-04/">
            
                <a href="../chapter-04/#passing-a-child-as-a-prop">
            
                    
                    Passing a child as a prop
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.3" data-path="../chapter-04/">
            
                <a href="../chapter-04/#higher-order-component">
            
                    
                    Higher-order component
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.4" data-path="../chapter-04/">
            
                <a href="../chapter-04/#function-as-a-children-render-prop">
            
                    
                    Function as a children, render prop
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="../chapter-05/">
            
                <a href="../chapter-05/">
            
                    
                    Controlled and uncontrolled inputs
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="../chapter-06/">
            
                <a href="../chapter-06/">
            
                    
                    Presentational and container components
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Data flow</li>
        
        
    
        <li class="chapter " data-level="3.1" data-path="../chapter-07/">
            
                <a href="../chapter-07/">
            
                    
                    One direction data flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="../chapter-08/">
            
                <a href="../chapter-08/">
            
                    
                    Flux
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.2.1" data-path="../chapter-08/">
            
                <a href="../chapter-08/#flux-architecture-and-its-main-characteristics">
            
                    
                    Flux architecture and its main characteristics
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.2.2" data-path="../chapter-08/">
            
                <a href="../chapter-08/#implementing-a-flux-architecture">
            
                    
                    Implementing a Flux architecture
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="../chapter-09/">
            
                <a href="../chapter-09/">
            
                    
                    Redux
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.3.1" data-path="../chapter-09/">
            
                <a href="../chapter-09/#redux-architecture-and-its-main-characteristics">
            
                    
                    Redux architecture and its main characteristics
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.3.2" data-path="../chapter-09/">
            
                <a href="../chapter-09/#simple-counter-app-using-redux">
            
                    
                    Simple counter app using Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    
        
        <li class="header">Good to know</li>
        
        
    
        <li class="chapter " data-level="4.1" data-path="../chapter-10/">
            
                <a href="../chapter-10/">
            
                    
                    Dependency injection
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1.1" data-path="../chapter-10/">
            
                <a href="../chapter-10/#using-reacts-context-prior-v-163">
            
                    
                    Using React's context (prior to v. 16.3)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.1.2" data-path="../chapter-10/">
            
                <a href="../chapter-10/#using-reacts-context-v-163-and-above">
            
                    
                    Using React's context (v. 16.3 and above)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.1.3" data-path="../chapter-10/">
            
                <a href="../chapter-10/#using-the-module-system">
            
                    
                    Using the module system
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="../chapter-11/">
            
                <a href="../chapter-11/">
            
                    
                    Styling
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.2.1" data-path="../chapter-11/">
            
                <a href="../chapter-11/#the-good-old-css-class">
            
                    
                    The good old CSS class
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.2.2" data-path="../chapter-11/">
            
                <a href="../chapter-11/#inline-styling">
            
                    
                    Inline styling
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.2.3" data-path="../chapter-11/">
            
                <a href="../chapter-11/#css-modules">
            
                    
                    CSS modules
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.2.4" data-path="../chapter-11/">
            
                <a href="../chapter-11/#styled-components">
            
                    
                    Styled-components
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="../chapter-12/">
            
                <a href="../chapter-12/">
            
                    
                    Integration of third-party libraries
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="4.4" data-path="./">
            
                <a href="./">
            
                    
                    React and separation of concerns
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Summary</li>
        
        
    
        <li class="chapter " data-level="5.1" data-path="../chapter-14/">
            
                <a href="../chapter-14/">
            
                    
                    Summary
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >React and separation of concerns</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="react-and-separation-of-concerns">React and separation of concerns</h1>
<p>Years ago when Facebook announced their JSX syntax we had a wave of comments how this was against some of the well established good practices. The main point of most people was that it violates the <a href="https://en.wikipedia.org/wiki/Separation_of_concerns#HTML,_CSS,_JavaScript" target="_blank">separation of concerns</a>. They said that React and its JSX are mixing HTML, CSS and JavaScript which were suppose to be separated.</p>
<p>In this article we will see how React and its ecosystem has quite good separation of concerns. We will prove that markup, styles and logic may live in the same JavaScript land and still be separated.</p>
<h2 id="styling">Styling</h2>
<p>React components render to DOM elements. Nothing stops us to use the good old <code>class</code> attribute and attach a CSS class to the produced HTML element. The only one difference is that the attribute is called <code>className</code> instead of <code>class</code>. The rest still works which means that if we want we may put our styles into external <code>.css</code> files. Following this approach we are not breaking the separation of concerns principle and still build a React app using JSX.</p>
<pre><code class="lang-js"><span class="hljs-comment">// assets/css/styles.css</span>
.pageTitle {
  color: pink;
}

<span class="hljs-comment">// assets/js/app.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">PageTitle</span>(<span class="hljs-params">{ text }</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&apos;pageTitle&apos;</span>&gt;</span>{ text }<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>;
}
</code></pre>
<p>The &quot;problem&quot; became a problem when <a href="https://vimeo.com/116209150" target="_blank">developers</a> started talking about &quot;CSS in JavaScript&quot;. Back in 2014 this looked weird and wrong. However, the next couple of years showed that this is not that bad. Let&apos;s take the following example:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">UserCard</span>(<span class="hljs-params">{ name, avatar }</span>) </span>{
  <span class="hljs-keyword">const</span> cardStyles = {
    padding: <span class="hljs-string">&apos;1em&apos;</span>,
    boxShadow: <span class="hljs-string">&apos;0px 0px 45px 0px #000&apos;</span>
  };
  <span class="hljs-keyword">const</span> avatarStyles = {
    float: <span class="hljs-string">&apos;left&apos;</span>,
    display: <span class="hljs-string">&apos;block&apos;</span>,
    marginRight: <span class="hljs-string">&apos;1em&apos;</span>
  };
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{cardStyles}</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{avatar}</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{avatarStyles}</span> /&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{name}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  );
}
</span></code></pre>
<p>This is the pain point. The place where we are mixing CSS and markup or we may say mixing styling and structure. To solve the issue let&apos;s keep <code>UserCard</code> still responsible for the structure, but extract the styling out into dedicated components <code>Card</code> and <code>Avatar</code>:</p>
<p><span class="new-page"></span></p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Card</span>(<span class="hljs-params">{ children }</span>) </span>{
  <span class="hljs-keyword">const</span> styles = {
    padding: <span class="hljs-string">&apos;1em&apos;</span>,
    boxShadow: <span class="hljs-string">&apos;0px 0px 45px 0px #000&apos;</span>,
    maxWidth: <span class="hljs-string">&apos;200px&apos;</span>
  };
  <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles}</span>&gt;</span>{children}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Avatar</span>(<span class="hljs-params">{ url }</span>) </span>{
  <span class="hljs-keyword">const</span> styles = {
    float: <span class="hljs-string">&apos;left&apos;</span>,
    display: <span class="hljs-string">&apos;block&apos;</span>,
    marginRight: <span class="hljs-string">&apos;1em&apos;</span>
  };
  <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{url}</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles}</span> /&gt;</span>;
}
</span></code></pre>
<p>Then <code>UserCard</code> component becomes simpler and has no styling concerns:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">UserCard</span>(<span class="hljs-params">{ name, avatar }</span>) </span>{
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Card</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">Avatar</span> <span class="hljs-attr">url</span>=<span class="hljs-string">{avatar}</span> /&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{name}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">Card</span>&gt;</span>
  );
}
</span></code></pre>
<p>So, as we can see, it is all matter of composition. React even makes our applications more compact because everything is defined as a reusable components and lives in the same context - JavaScript.</p>
<p>There are bunch of libraries that help writing maintainable CSS in JavaScript (and to be more specific in React ecosystem). I have experience with <a href="https://glamorous.rocks/" target="_blank">Glamorous</a> and <a href="https://www.styled-components.com/" target="_blank">styled-components</a> and they both work really well. The result of such libraries is usually a ready for use component that encapsulates the styling and renders a specific HTML tag.</p>
<h2 id="logic">Logic</h2>
<p>Very often we write logic inside our React components which is more then clicking a button and showing a message. The snippet below demonstrates a component that fetches data from a fake API and renders users on the screen.</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  <span class="hljs-keyword">constructor</span>(props) {
    <span class="hljs-keyword">super</span>(props);

    <span class="hljs-keyword">this</span>.state = {
      loading: <span class="hljs-literal">false</span>,
      users: <span class="hljs-literal">null</span>,
      error: <span class="hljs-literal">null</span>
    };
  }
  componentDidMount() {
    <span class="hljs-keyword">this</span>.setState({ loading: <span class="hljs-literal">true</span> }, () =&gt; {
      fetch(<span class="hljs-string">&apos;https://jsonplaceholder.typicode.com/users&apos;</span>)
        .then(response =&gt; response.json())
        .then(users =&gt; <span class="hljs-keyword">this</span>.setState({ users, loading: <span class="hljs-literal">false</span> }))
        .catch(error =&gt; <span class="hljs-keyword">this</span>.setState({ error, loading: <span class="hljs-literal">false</span> }));
    });
  }
  render() {
    <span class="hljs-keyword">const</span> { loading, users, error } = <span class="hljs-keyword">this</span>.state;

    <span class="hljs-keyword">if</span> (isRequestInProgress) <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Loading<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>;
    <span class="hljs-keyword">if</span> (error) <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Ops, sorry. No data loaded.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>;
    <span class="hljs-keyword">if</span> (users) <span class="hljs-keyword">return</span> users.map(({ name }) =&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{name}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>);
    <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
  }
}
</code></pre>
<p>Quite a lot of things are happening isn&apos;t it. When first rendered the component shows nothing - <code>null</code>. Then we get the life-cycle <code>componentDidMount</code> method fired where we set the <code>loading</code> flag to <code>true</code> and fire the API request. While the request is in flight we display a paragraph containing the text <code>&quot;Loading&quot;</code>. In the end, if everything is ok we turn <code>loading</code> to false and render list of user names. In case of error we display <code>&quot;Ops, sorry. No data loaded&quot;</code>.</p>
<p>Now I agree that the <code>App</code> component is kind of violating the separation of concerns. It contains data fetching and data representation. There are couple of ways to solve this problem but my favorite one is <a href="https://github.com/krasimir/react-in-patterns/blob/master/book/chapter-04/README.md#function-as-a-children-render-prop" target="_blank">FaCC (Function as Child Components)</a>. Let&apos;s write a <code>FetchUsers</code> component that will take care for the API request.</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FetchUsers</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  <span class="hljs-keyword">constructor</span>(props) {
    <span class="hljs-keyword">super</span>(props);

    <span class="hljs-keyword">this</span>.state = {
      loading: <span class="hljs-literal">false</span>,
      users: <span class="hljs-literal">null</span>,
      error: <span class="hljs-literal">null</span>
    };
  }
  componentDidMount() {
    <span class="hljs-keyword">this</span>.setState({ loading: <span class="hljs-literal">true</span> }, () =&gt; {
      fetch(<span class="hljs-string">&apos;https://jsonplaceholder.typicode.com/users&apos;</span>)
        .then(response =&gt; response.json())
        .then(users =&gt; <span class="hljs-keyword">this</span>.setState({ users, loading: <span class="hljs-literal">false</span> }))
        .catch(error =&gt; <span class="hljs-keyword">this</span>.setState({ error, loading: <span class="hljs-literal">false</span> }));
    });
  }
  render() {
    <span class="hljs-keyword">const</span> { loading, users, error } = <span class="hljs-keyword">this</span>.state;

    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.props.children({ loading, users, error });
  }
}
</code></pre>
<p>The very first thing that we notice is that the constructor and <code>componentDidMount</code> method are just copy-pasted from the <code>App</code> component. The difference is that we render nothing (no data representation) but call the <code>children</code> as a function passing the status/result of the request. Having <code>FetchUsers</code> we may transform our <code>App</code> into a stateless component:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">FetchUsers</span>&gt;</span>
      {({ loading, users, error }) =&gt; {
        if (loading) return <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Loading<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>;
        if (error) return <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Ops, sorry. No data loaded.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>;
        if (users) return users.map(({ name }) =&gt; <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{name}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>);
        return null;
      }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">FetchUsers</span>&gt;</span></span>
  );
}
</code></pre>
<p>At this point our markup is separated from the logic. We still operate with the same data and as a bonus we have this reusable <code>FetchUsers</code> component that may be dropped anywhere.</p>
<h2 id="markup">Markup</h2>
<p>JSX syntax is following the XML/HTML semantics and as such comes with a huge benefit - composability. My opinion is that React is one level up over the HTML because it allows us to group complex markup into a single component. For example we have a <code>&lt;header&gt;</code> with some <code>&lt;h1&gt;</code>, <code>&lt;nav&gt;</code> and <code>&lt;p&gt;</code> tags inside. We may easily create a <code>&lt;Header&gt;</code> component and put all those bits inside. We still keep them together but now they are easy to move around. Perhaps, there are places where we write some logic directly into the markup like so:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CallToActionButton</span>(<span class="hljs-params">{ service, token }</span>) </span>{
  <span class="hljs-keyword">return</span> &lt;button onClick={ () =&gt; service.request(token) } /&gt;;
}

&lt;CallToAction server={ service } token={ token } /&gt;
</code></pre>
<p>In such cases I again recommend to use composition and remove any app logic concerns out of the presentation.</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CallToActionButton</span>(<span class="hljs-params">{ onButtonClicked }</span>) </span>{
  <span class="hljs-keyword">return</span> &lt;button onClick={ onButtonClicked } /&gt;;
}

&lt;CallToAction server={ () =&gt; service.request(token) } /&gt;
</code></pre>
<p>It is just a matter of spotting those bits and change them on time.</p>
<h2 id="conclusion">Conclusion</h2>
<p>No, I don&apos;t think that React is against the separation of concerns. It is all about design and composition. There are <a href="https://github.com/krasimir/react-in-patterns" target="_blank">patterns</a> that help us to compose and logically separate our apps. We can still write well organized programs with clearly defined responsibilities.</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="../chapter-12/" class="navigation navigation-prev " aria-label="Previous page: Integration of third-party libraries">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="../chapter-14/" class="navigation navigation-next " aria-label="Next page: Summary">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"React and separation of concerns","level":"4.4","depth":1,"next":{"title":"Summary","level":"5.1","depth":1,"path":"chapter-14/README.md","ref":"chapter-14/README.md","articles":[]},"previous":{"title":"Integration of third-party libraries","level":"4.3","depth":1,"path":"chapter-12/README.md","ref":"chapter-12/README.md","articles":[]},"dir":"ltr"},"config":{"plugins":[],"root":"./book","styles":{"website":"./styles/website.css","ebook":"./styles/ebook.css","pdf":"./styles/ebook.css"},"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"Krasimir Tsonev","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a5","chapterMark":"pagebreak","pageBreaksBefore":"//*[@class='new-page']","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"React in patterns","gitbook":"3.2.3","description":"A book about common design patterns used while developing with React."},"file":{"path":"chapter-13/README.md","mtime":"2023-07-06T05:38:39.118Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2025-01-27T05:24:55.061Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

